<template>
  <div class="login-main">
    <div @click="comeBack('/')" class="login-header">
      <van-icon name="arrow-left" />
      <img  src="@/assets/image/lang.png" alt="">
    </div>
    <div class="title">{{ $t('h.A001') }}</div>
    <div class="login-method">
<!--      <div class="box">手机号</div>-->
<!--      <div class="box active">邮箱</div>-->
    </div>
    <div class="form">
      <el-form :model="ruleForm" status-icon :rules="rules" ref="ruleForm" class="demo-ruleForm">
        <el-form-item :label="$t('h.A002')" prop="email">
          <el-input v-model.number="ruleForm.email" :placeholder="$t('h.A003')"></el-input>
        </el-form-item>
        <el-form-item style="margin-top: -10px" :label="$t('h.A004')" prop="pass">
          <el-input v-model.number="ruleForm.pass" show-password :placeholder="$t('h.A005')"></el-input>
        </el-form-item>
        <el-form-item >
            <div @click="submitForm('ruleForm')"  class="submit">{{ $t('h.A001') }}</div>
<!--          <van-button @click="submitForm('ruleForm')" color="#002FFF" block type="primary">登录</van-button>-->
        </el-form-item>
      </el-form>
    </div>
    <div class="form-tips">
      {{$t('h.A006')}}<a @click="goRegister" href="javascript:void (0)">{{$t('h.A008')}}</a>
    </div>
  </div>
</template>

<script>
export default {
  data() {
    return {
      ruleForm: {pass: '', email: ''},
      rules:{
        email: [{ required: true, message: '请输入邮箱', trigger: 'blur' }],
        pass: [{ required: true, message: '请输入密码', trigger: 'blur' }],
      }
    }
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          alert('submit!');
        } else {
          console.log('error submit!!');
          return false;
        }
      });
    },
    goRegister(){
      this.$router.push('/register')
    },
    comeBack(item){
      this.$router.push(item)
    }
  }
}
</script>


<style scoped lang="scss">
.login-main{
  width: 100%;
  padding: 3% 4%;
  box-sizing: border-box;
  .login-header{
    width: 100%;
    height: 40px;
    background: #fff;
    font-size: 24px;
    display: flex;
    justify-content: space-between;

    box-sizing: border-box;
    img{
      height: 22px;
    }
  }
  .title{
    width: 100%;
    margin-top: 10px;
    font-weight: 600;
    font-size: 28px;
  }
  .login-method{
    width: 100%;
    margin-top: 20px;
    display: flex;
    .box{
      padding: 8px 30px;
      background: #eee;
      font-style: normal;
      font-weight: 400;
      font-size: 14px;
      color: #333;
      border-radius: 5px;
      margin-right: 15px;
    }
    .active{
      background: #002FFF;
      color: #fff;
    }
  }
  .form{
    width: 100%;
    margin-top: 20px;
    margin-bottom: 20px;
    .submit{
      width: 100%;
      display: block;
      justify-content: center;
      align-items: center;
      font-size: 16px;
      text-align: center;
      color: #fff;
      background: #002FFF;
      border-radius: 5px;
    }
  }
  .form-tips{
    width: 100%;
    font-size: 14px;
    text-align: center;
    a{
      font-size: 14px;
      color: #4aa8ff;
    }
  }
}

</style>